import React, { Component } from "react";
import Header from "../components/header";
import Home from "../pages/home/home";
import Start from "../pages/start/start";
import Css from "../pages/css/css";
import Page from "../pages/page/page";
// 引入home模块

export default class App extends Component {
  // 初始化数据
  constructor(props) {
    super(props);
    this.state = {
      // 动态设置页面
      [props.page]: true
    };
    // console.log(props)
  }
  // 获取到当前的页面状态 ---加了括号是获取值， 不加括号是方法
  // 在APP里面的方法 ， 在header里面的index的state可以接收到
  getChoosePage() {
    for (let page in this.state) {
      if (this.state[page]) {
        // 返回当前的页面名称
        return page;
      }
    }
  }
  // 改变当前页面的方法 ----从header---index里面得到数据
  changePage(page) {
    // 排他法设置页面
    // 先获取状态
    let state = this.state;
    // 清除所有页面
    for (let key in state) {
      // 清空
      state[key] = false;
    }
    state[page] = true;
    // 更新状态
    this.setState(state);
  }
  // 渲染
  render() {
    // 解构数据
    let { home, start, css, component, js, marker } = this.state;
    return (
      <div>
        {/* // 获取到当前的页面状态 ---加了括号是获取该方法的返回值， 不加括号是传递方法 */}
        <Header
          choosePage={this.getChoosePage()}
          method={this.changePage.bind(this)}
        />
        <Home style={home}>首页</Home>
        <Page style={start} title="起步" intro="简要介绍 Bootstrap，以及如何下载、使用，还有基本模版和案例，等等。" url="data/start.json"></Page>
				<Page style={css} title="全局 CSS 样式" intro="设置全局 CSS 样式；基本的 HTML 元素均可以通过 class 设置样式并得到增强效果；还有先进的栅格系统。" url="data/css.json"></Page>
				<Page style={component} title="组件" intro="无数可复用的组件，包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能。" url="data/component.json"></Page>
				<Page style={js} title="JavaScript 插件" intro="jQuery 插件为 Bootstrap 的组件赋予了“生命”。可以简单地一次性引入所有插件，或者逐个引入到你的页面中。" url="data/js.json"></Page>
				<Page style={marker} title="定制并下载 Bootstrap" intro="通过自定义 Bootstrap 组件、Less 变量和 jQuery 插件，定制一份属于你自己的 Bootstrap 版本吧。" url="data/marker.json"></Page>
      </div>
    );
  }
}
App.defaultProps = {
  page: "home"
};
